<div class="main">
    <h2 *ngIf="!command">Add an Exec Command</h2>
    <h2 *ngIf="command">Edit exec command <i>{{command.name}}</i></h2>
    <div class="description">An Exec command is a shell command executed into a container.</div>
    <form [formGroup]="form">
        <div><mat-checkbox formControlName="hotReloadCapable">Hot Reload Capable</mat-checkbox></div>
        <mat-form-field appearance="outline" class="mid-width">
            <mat-label><span>Name</span></mat-label>
            <mat-error>Lowercase words separated by dashes. Ex: my-command</mat-error>
            <input placeholder="unique name to identify the command" data-cy="command-exec-name" matInput formControlName="name">
        </mat-form-field>
        <mat-form-field appearance="outline" class="mid-width">
            <mat-label><span>Command Line</span></mat-label>
            <input placeholder="command line passed to the shell" data-cy="command-exec-command-line" matInput formControlName="commandLine">
        </mat-form-field>
        <mat-form-field appearance="outline" class="mid-width">
            <mat-label><span>Working Dir</span></mat-label>
            <input placeholder="Working directory of the command" data-cy="command-exec-working-dir" matInput formControlName="workingDir">
        </mat-form-field>
        <button data-cy="command-exec-projects-root" mat-button (click)="onProjectsRoot()">Work on Project's Root Directory</button>
        <div>
            <app-select-container 
                formControlName="component" 
                label="Container" 
                [containers]="containerList"
                (createNew)="onCreateNewContainer($event)"></app-select-container>
        </div>
    </form>

    <app-container
        *ngIf="showNewContainer"
        [volumeNames]="volumeNames ?? []"
        (created)="onNewContainerCreated($event)"
        ></app-container>

    <button *ngIf="!command" data-cy="command-exec-create" [disabled]="form.invalid" mat-flat-button color="primary" matTooltip="create new Exec Command" (click)="create()">Create</button>
    <button *ngIf="command" data-cy="command-exec-save" [disabled]="form.invalid" mat-flat-button color="primary" matTooltip="save command" (click)="save()">Save</button>
    <button mat-flat-button (click)="cancel()">Cancel</button>
</div>
